<template>
	
	<!-- 
		需求分析：
		1. 页面需要，完成的数量和总数量，所以需要传递todos数组过来
		2. 清除已完成任务的按钮需要一个函数
		3. 全选全部选，需要传递一个函数
	 -->
	<div class="todo-footer">
		<label>
			<!--
				全选/ 全部选使用计算属性来做会比比较简单一些：
				1. 首先要读出该chckbox的值，用户到底是全选了还是全没选，也就是这个值到底是为true，还是为false
				2. 要监视这个值的变化，当这个值变化为true的时候，代表用户全选，当这个值变为false的时候，代表用户没全选
				由以上两点分析出，这就是vue当中计算属性的get和set
			 -->
		<input type="checkbox" v-model="isAll"/>
		</label>
		<span>
		<span>已完成{{completeSize}}</span> / 全部{{todos.length}}
		</span>
		<button class="btn btn-danger" @click="delComplete" v-show="completeSize > 0">清除已完成任务</button>
	</div>
</template>

<script>
	export default{
		props:{
			todos:Array,
			delComplete:Function,
			allExe:Function
		},
		computed:{
			// 已完成的数量使用vue的计算属性写起来更简单写
			completeSize() {
				return this.todos.reduce((preTotal, todo) => preTotal + (todo.flog?1:0), 0);
			},
			isAll:{
				get() {
					// 已完成的 为勾选的 ，勾选的等价于数组全部的数量，则该值返回true，否则返回false
					return this.completeSize === this.todos.length && this.completeSize > 0;
				},
				set(value) {
					// value为当前checkbox的最新的值
					this.allExe(value);
				}
			}
		}
	}
</script>

<style>
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>
